const list = [
  { id: 1001, name: 'Vue' },
  { id: 1002, name: 'React' },
  { id: 1003, name: 'Angular' }
]

const isLogin = false

const articleType = 2  // 0 1 3

function getData() {
  if (articleType === 0) {
    return <div>我是无图文章</div>
  } else if (articleType === 1) {
    return <div>我是单图模式</div>
  } else {
    return <div>我是三图模式</div>
  }
}



function App(options) {
  const handleClick = (num, e) => {
    console.log('button点击了', num, e);
  }

  return (
    <div>
      <h1>react.js 列表渲染</h1>

      <hr />

      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>

      <h2>逻辑与 && {isLogin && '渲染吧'}</h2>
      <h2>三元运算 {isLogin ? '渲染吧' : '不渲染'}</h2>

      <h2>调用函数渲染不同的模版 {getData()}</h2>
      <hr />
      <h1>5 事件绑定</h1>
      <button onClick={handleClick}>点击事件1</button>

      <button onClick={e => handleClick(e)}>点击事件2</button>

      <button onClick={e => handleClick('3', e)}>点击事件3</button>



    </div >
  )
}

export default App